<template>
  <div
    class="dialog"
    v-if="show"
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="body_wapper">
      <div class="body">
        <i
          class="el-icon-close"
          @click="
            show = false;
            $emit('close');
          "
        ></i>
        <div :style="personnel"></div>
        <rz-height />
        <div class="content">
          <div class="table">
            <div style="flex: 1" class="center">区域</div>
            <div style="flex: 1" class="center">单位数</div>
            <div style="flex: 1" class="center">负责人</div>
            <div style="flex: 1" class="center">安全总监</div>
            <div style="flex: 1" class="center">安全员</div>
            <div style="flex: 1" class="center">日管控</div>
            <div style="flex: 1" class="center">周排查</div>
            <div style="flex: 1" class="center">月调度</div>
            <div style="flex: 1" class="center">风险问题发现数</div>
            <div style="flex: 1" class="center">整改数</div>
          </div>
          <div class="tableBody" v-for="(item, index) in data" :key="index">
            <div style="flex: 1" class="center">{{ item.streetName }}</div>
            <div style="flex: 1" class="center">{{ item.unitCount }}</div>
            <div style="flex: 1" class="center">{{ item.headCount }}</div>
            <div style="flex: 1" class="center">{{ item.secureCount }}</div>
            <div style="flex: 1" class="center">
              {{ item.safetyDirectorCount }}
            </div>
            <div style="flex: 1" class="center">{{ item.dailyBatchCount }}</div>
            <div style="flex: 1" class="center">
              {{ item.weeklyBatchCount }}
            </div>
            <div style="flex: 1" class="center">
              {{ item.monthlyBatchCount }}
            </div>
            <div style="flex: 1;color:#EDE12D" class="center">{{item.riskIssuesCount}}</div>
            <div style="flex: 1;color:#00E683" class="center">{{item.quantityCount}}</div>
          </div>
            <div :style="note1">各区域分析</div>
        </div>
        <rz-height :height="20" />
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="content">
              <div id="main11" style="width: 100%; height: 300px"></div>
                <div :style="note1">各区域落实情况分析</div>
              </div
          ></el-col>
          <el-col :span="12">
            <div class="content">
              <div id="main12" style="width: 100%; height: 300px"></div>
                <div :style="note1">信用指数分析</div>
              </div
          ></el-col>
        </el-row>
      </div>
      <rz-height />
      <rz-height />
      <rz-height />
      <rz-height />
    </div>
  </div>
</template>
<script>
import {
  principalResponsibilityDetails,
  findPrincipalResponsibility,
} from "@/api/modules/home";
var echarts = require("echarts");
export default {
  // props:[],
  // 页面加载
  created() {},
  // 页面加载完成
  mounted() {
    this.getList();
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      loading: true,
      show: true,
      note1: {
   backgroundImage: "url(" + require("@/assets/images/item13.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        position: "absolute",
 left: "20px",
 paddingLeft: "10px",
  width:'170px',
  top: "0",
  transform: "translateY(-50%)",
  color:"white",
  fontSize:'14px',
  height:'25px',
  lineHeight: '24px',
      },
      personnel: {
        width: "500px",
        margin: "0 auto",
        backgroundImage: "url(" + require("@/assets/images/item15.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        height: "50px",
      },
      data: {},
      dataA: {},
    };
  },
  // 方法
  methods: {
    async getList() {
      let { data } = await principalResponsibilityDetails({});
      this.data = data;
      this.getList1();
      this.loading = false;
      this.pieChart();
    },

    async getList1() {
      let { data } = await findPrincipalResponsibility();
      this.dataA = data;
      this.pieChart1();
    },
    pieChart() {
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },


           formatter(e){
              return `
              <h3>${e[0].axisValue}</h3>
               <h5>单位数${e[0].value}家</h5>
              <h5>日管控${e[1].value}%</h5>
              <h5>周排查${e[2].value}%</h5>
              <h5>月调度${e[3].value}%</h5>
              `
           },
              backgroundColor:"rgba(4,39,121,0.9)",
                           textStyle:{
           color:"#00E0FB",

},
        },
        legend: {
          data: ["单位数",  "日管控","周排查","月调度"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.data
            .filter((x) => x.streetName != "合计")
            .map((x) => x.streetName),
        },
        yAxis: [
          {
             name: "单位数",
            type: "value",
            splitLine: {
              show: false, // Do not show grid lines
            },
          },
          {
            //第二种方式
            type: "value",
            name: "占比",
            min: 0,
            max: 100,
            position: "right",
            axisLabel: {
              formatter: "{value} %",
            },
            splitLine: {
              show: false, // Do not show grid lines
            },
          },
        ],
        series: [
          {
            name: "单位数",
            type: "bar",
            data: this.data
              .filter((x) => x.streetName != "合计")
              .map((x) => x.unitCount),
              itemStyle: {
          color: "#32C5E9",
              },
               barWidth: 30,
                label: {
        show: true,
        position: 'top',
        color:"white"
      },
          },
          {
             yAxisIndex: 1,
            name: "日管控",
            type: "line",
            data: this.data
              .filter((x) => x.streetName != "合计")
              .map((x) => x.dayPercentage),
              
          },
             {
             yAxisIndex: 1,
            name: "周排查",
            type: "line",
            data: this.data
              .filter((x) => x.streetName != "合计")
              .map((x) => x.weeklyPercentage),
          },
           {
             yAxisIndex: 1,
            name: "月调度",
            type: "line",
            data: this.data
              .filter((x) => x.streetName != "合计")
              .map((x) => x.monthPercentage),
          },
        
        ],
      };
      echarts.init(document.getElementById("main11"), "dark").setOption(option);
    },
    pieChart1() {
      let option = {
        legend: {
          top: 10,
          data: ["90-100", "80-89", "70-79", "60-69", "0-59"],
          textStyle: {
            color: "white",
          },
        },
        color: ["#4992FF", "#7cffb2", "#58d9f9", "#fddd60", "#ff6e76"],
        backgroundColor: "transparent",
        tooltip: {
          textStyle: {
            color: "#00E0FB",
          },
          trigger: "item",
          formatter: "{b} : {c}家，占比 ({d}%)",
          backgroundColor: "rgba(4,39,121,0.9)",
        },

        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "60%"],
            data: [
              {
                value: this.dataA.fractionOne,
                Proportion: this.dataA.percentageOne,
                name: "90-100",
              },
              {
                value: this.dataA.fractionTwo,
                Proportion: this.dataA.percentageTwo,
                name: "80-89",
              },
              {
                value: this.dataA.fractionThree,
                Proportion: this.dataA.percentageThree,
                name: "70-79",
              },
              {
                value: this.dataA.fractionFour,
                Proportion: this.dataA.percentageFour,
                name: "60-69",
              },
              {
                value: this.dataA.fractionFive,
                Proportion: this.dataA.percentageFive,
                name: "0-59",
              },
            ],
            hoverAnimation: false,
            label: {
              color: "#fff",
              show: true,
              formatter: function (e) {
                return `${e.data.value}家(${e.data.Proportion})`;
              },
            },
          },
        ],
      };
      echarts.init(document.getElementById("main12"), "dark").setOption(option);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.dialog {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  overflow: auto;
  .body_wapper {
    height: 100%;
    width: 90%;
    left: 5%;
    top: 5%;
    position: absolute;
    .body {
      background: url(../../../../assets/images/background.jpg);
      padding: 20px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .el-icon-close {
        color: #2760b5;
        font-size: 30px;
        border-radius: 30px;
        cursor: pointer;
        border: 2px solid #2760b5;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 1;
      }

      // .dv-border-box-1 {
      //   height: auto;
      .content {
        position: relative;
        padding: 30px 20px;
        background: url(../../../../assets/images/item10.png),
          url(../../../../assets/images/item8.png),
          url(../../../../assets/images/item9.png),
          url(../../../../assets/images/item11.png);
        background-position: top left, top right, bottom right, bottom left;
        background-repeat: no-repeat;
        border: 1px solid #1556ab;

        .table {
          display: flex;
          align-items: center;
          height: 40px;
          color: #fff;
          background-color: #125fb1;
          font-size: 14px;
          font-weight: 700;
        }
        .tableBody {
          display: flex;
          align-items: center;
          padding: 10px 0;
          font-size: 14px;
          color: #fff;
          border-bottom: 1px solid #125fb1;
          div {
            padding: 0 10px;
          }
        }
      }
      // }
    }
  }
}
</style>